<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <link href="layui/css/layui.css" media="all" rel="stylesheet">
</head>
<body onload="refreshList()">
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <button class="layui-btn layui-btn-normal layui-btn-fluid" onclick="refreshList()">刷新</button>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12">
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
</div>
<script src="js/index.js" type="application/javascript"></script>
<script src="layui/layui.all.js"></script>
<script>
    function refreshList() {
        let table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo',
            method: 'post',     // 接口http请求类型，默认：get
            url: '/user/userList', //数据接口
            contentType: 'application/json',    // 发送到服务端的内容编码类型
            page: true,         //开启分页
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            },
            request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            response: {
                "statusCode": 200    //规定成功的状态码，默认：0
            },
            cols: [[ //表头
                {field: 'id', title: 'ID', fixed: 'left'}
                , {field: 'username', title: '用户名'}
            ]]
        });
    }
</script>
</body>
</html>
